<script setup>
import { defineProps } from 'vue'

// 使用对象形式定义 props，明确声明 init 支持的所有数据类型
// 父组件传递了字符串、数字、布尔、数组、对象、null 等多种类型
const props = defineProps({
    init: {
        // 允许的类型：字符串、数字、布尔、数组、对象、null
        type: [String, Number, Boolean, Array, Object, null],
        // 非必填（父组件可能不传递该属性，此时为 undefined）
        required: false,
        // 可选：设置默认值（如果父组件未传递则使用）
        // default: '未传递数据'
    }
})

console.log('子组件接收的init数据：', props.init)
</script>

<template>
    <div class="child-component">
        <p>
            子组件接收的init数据：
            {{
                // 处理各种特殊值的显示
                init === null ? 'null' :
                    init === undefined ? 'undefined' :
                        init
            }}
        </p>
    </div>
</template>

<style scoped>
.child-component {
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 4px;
}

p {
    margin: 0;
    color: #333;
}
</style>
